<template>
  <div class="wrapper">
    <div class="content">
      <div class="top">
        <img src="../../assets/img/gerzx/个人中心前.png" alt="">
        <span>昵称</span>
      </div>
      <div class="wenzi">
      <p>该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价...</p>
      </div>
      <!--图片-->
      <div class="picture">
        <img src="../../assets/img/shouye/shouye/hualeichuncai.png" alt="">
      </div>
      <p class="time">8小时前</p>
    </div>
    <!--中间记录-->
    <div class="middle">
      <img class="img1" src="../../assets/img/shouye/shouye/hualeichuncai.png" alt="">
      <!--右边文字-->
      <div class="content_right">
        <span>焕彩萃璨花蕊唇彩4.8g</span>
        <!--<div class="mod">-->
        <div>
          <img src="../../assets/img/gerzx/待发货.png" alt="">
          <img src="../../assets/img/gerzx/待发货.png" alt="">
          <span>海外直邮</span>
        </div>
        <!--</div>-->

        <p>¥166.06</p>

      </div>
    </div>
    <!--用户评论-->
    <div class="commonent">
      用户评论 ( 10 )
    </div>
    <!--下面昵称-->
    <div class="top">
      <img src="../../assets/img/gerzx/个人中心前.png" alt="">
      <span>昵称</span>
    </div>
    <div class="wenzi">
      <p>该模块主要内容是顾客对购买的商品的评论...该模块主要内容是顾客对购买的商品的评论...</p>
    </div>
    <!--点赞-->
    <div class="last">
      <ul>
        <li><img src="../../assets/img/gerzx/个人中心前.png" alt=""></li>
        <li>点赞</li>
      </ul>


      <ul>
        <li><img src="../../assets/img/gerzx/个人中心前.png" alt=""></li>
        <li>写评论</li>
      </ul>


      <ul>
        <li><img src="../../assets/img/gerzx/个人中心前.png" alt=""></li>
        <li>分享</li>
      </ul>
    </div>

  </div>
</template>
<script>
  export default {

  }
</script>
<style scoped>
  .top{
    margin-top: 0.6rem;
  }
  .top span:nth-child(2){
    font-size:0.9rem;
  }
  .wenzi p:nth-child(1){
    font-size:0.5rem;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    color: #808080;
  }
  /*图片*/
  .picture{
    width: 9rem;
    height: 5rem;
    border:1px solid #808080;
  }
   .picture img, .middle .img1{
     margin-left: 2rem;
     margin-top: 0.5rem;
   }
  .time{
    font-size:0.6rem;
    margin-top: 0.5rem;
    color: #808080;
  }
  .middle{
    overflow: hidden;
    width: 15rem;
    height: 4rem;
    border:1px solid #808080;
  }
  .middle .img1{
    float: left;
  }
  .content_right{
    margin-left: 2rem;
    float: left;
    font-size:0.69rem;
    padding-top: 0.6rem;
    color: #666666;
  }
  .content_right span:nth-child(5){
    color: #e53e42;
  }
  /*用户评论*/
  .commonent{
    font-size:0.8rem;
    margin:0.8rem;
    border-bottom:1px solid #cccccc;
  }
  /*点赞*/
  .last{
    border-bottom:1px solid #808080;
    border-top:1px solid #808080;
  }
  .last ul{
    display: inline-block;
    font-size:0.6rem;
    color: #808080;
    margin-left: 2.7rem;
    margin-top: 0.6rem;
    text-align: center;
  }
</style>
